<template>
  <el-card
    class="form-container"
    shadow="never"
  >
    <el-form
      :model="content"
      ref="contentFrom"
      label-width="150px"
    >
      <el-form-item
        label="品类名称："
        prop="name"
        :rules="[
          { required: true, message: '请输入品类名称', trigger: 'change' }
        ]">
        <el-input
          v-model="content.name"
          placeholder="请输入"
        ></el-input>
      </el-form-item>

      <el-form-item label="已选属性：">
        <el-table
          :data="prptyList"
          tooltip-effect="dark"
          style="width: 100%">
          <el-table-column
            prop="prptyName"
            label="属性名称"
            width="120">
          </el-table-column>
          <el-table-column label="操作" width="240" align="center">
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="text"
                @click="handleDel(scope.$index)">删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-form-item>

      <el-card>
        <el-form-item label="关联属性：">
          <el-input
            v-model="listQuery.prptyName"
            placeholder="属性名称"
            style="width:300px"
          ></el-input>
          <el-button @click="handleSearchList()">搜索</el-button>
        </el-form-item>
        <el-form-item>
          <el-table
            v-loading="loading"
            :data="tableData"
            tooltip-effect="dark"
            style="width: 100%"
          >
            <el-table-column
              label="属性名称"
              width="120"
            >
              <template slot-scope="scope">{{ scope.row.prptyName }}</template>
            </el-table-column>
            <el-table-column
              label="类型"
              width="120"
            >
              <template slot-scope="scope">{{ prptyType[scope.row.prptyType] }}</template>
            </el-table-column>
            <el-table-column
              label="属性值"
              show-overflow-tooltip
            >
              <template slot-scope="scope">{{ scope.row.prptyValList | formatPrptyValList }}</template>
            </el-table-column>
            <el-table-column label="操作" width="240" align="center">
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  type="text"
                  @click="handleAdd(scope.row)">添加
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-form-item>
        <el-form-item>
          <el-pagination
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            layout="total, sizes,prev, pager, next,jumper"
            :page-size="listQuery.pageSize"
            :page-sizes="[5,10,15]"
            :current-page.sync="listQuery.pageNum"
            :total="total"
          >
          </el-pagination>
        </el-form-item>
      </el-card>
      <br>
      <el-form-item>
        <el-button
          type="primary"
          @click="onSubmit('contentFrom')"
        >确定</el-button>
        <el-button @click="back">取消</el-button>
      </el-form-item>
    </el-form>
  </el-card>
</template>

<script>
import { prptypackageSave, prptyListPrptyByPackageId } from '@/api/goodsMs'
const defaultListQuery = {
  pageNum: 1,
  pageSize: 10,
  prptyName: '',
  prptyIds: ''
}
const defaultContent = {
  id: '',
  name: '',
  prptyIds: '',
  seq: 1,
  status: 0
}
export default {
  // name: 'MenuDetail',
  props: {
    isEdit: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      prptyType: {
        1: '销售属性',
        2: '自然属性'
      },
      listQuery: Object.assign({}, defaultListQuery),
      total: null,
      content: Object.assign({}, defaultContent),
      tableData: [],
      loading: false,
      prptyList: []
    }
  },
  mounted () {
    this.content.name = this.$route.query.name || ''
    this.listQuery.prptyPackageId = this.$route.query.id || ''
    this.prptyList = this.$route.query.prptyList ? JSON.parse(this.$route.query.prptyList).map((item) => {
      const { id, prptyName } = item
      return { id, prptyName }
    }) : []
    this.content.id = this.$route.query.id || ''

    this.getList()
  },
  filters: {
    formatPrptyValList (row) {
      const str = row.map((item) => {
        return item.prptyValue
      })
      return str.toString()
    }
  },
  methods: {
    handleSizeChange (val) {
      this.listQuery.pageNum = 1
      this.listQuery.pageSize = val
      this.getList()
    },
    handleCurrentChange (val) {
      this.listQuery.pageNum = val
      this.getList()
    },
    handleSearchList () {
      this.listQuery.pageNum = 1
      this.getList()
    },
    getList () {
      this.loading = true
      prptyListPrptyByPackageId(this.listQuery).then(res => {
        this.loading = false
        this.tableData = res.data.list
        this.total = res.data.total
      })
    },
    handleAdd (row) {
      const list = this.prptyList.map((item) => {
        return item.id
      })
      if (!list.includes(row.id)) {
        this.prptyList.push(row)
      }
    },
    handleDel (index) {
      this.prptyList.splice(index, 1)
    },
    onSubmit () {
      this.content.prptyIds = this.prptyList.map((item) => { return item.id }).toString().replace(/,/g, ';')

      this.$refs['contentFrom'].validate((valid) => {
        if (valid) {
          this.$confirm('是否提交数据', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            prptypackageSave(this.content).then((res) => {
              this.$message({
                message: '提交成功',
                type: 'success',
                duration: 1000
              })
              this.$router.back()
            })
          })
        } else {
          this.$message({
            message: '验证失败',
            type: 'error',
            duration: 1000
          })
          return false
        }
      })
    },
    back () {
      this.$router.go(-1)
    }
  }
}
</script>

<style scoped>
.form-container {
  position: relative;
  z-index: 0;
  width: 800px;
}
.cardValue {
}
.button-del {
  margin-top: 68px;
}
</style>
